<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <button onclick="goBack()" style="position: fixed; top: 20px; left: 20px; padding: 1px; font-size: 14px; cursor: pointer;">返回</button>

  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    myChart.showLoading();

    const carProductionData = {
      name: '比亚迪', demand: 200, desc: '比亚迪型号为X的电动汽车生产200辆',
      children: [
        { // 电池
          name: '瀚荣电子',  demand: 200, desc: '电池总装',
          children: [
            { 
              name: '科陆电子',  demand: 400, desc: '电池生产',
              children: [
                  { name: '宁德时代',  demand: 400, desc: '电池单体制造',},
                  { name: '德赛西威',  demand: 200, desc: '电池模组', }
                ]
            },

          ]
        },
        { // 驱动
          name: '长城汽车', demand: 200, desc: '驱动系统总装',
          children: [
            { name: '上海莱士',  demand: 200, desc: '电动机生产', children: [{ name: '正泰集团', demand: 200, desc: '电动机控制器'}] },
            { name: '万向集团',  demand: 200, desc: '传动系统生产' },
          ]
        },
        { // 中控
          name: '华为', demand: 200, desc: '中控系统总装',
        },
        { // 车身
          name: '长安汽车',  demand: 200, desc: '车身总装',
          children: [
            { name: '宝钢集团',  demand: 200, desc: '冲压成型、焊接' },
          ]
        },
        { // 底盘
          name: '奇瑞', demand: 200, desc: '底盘总装',
          children: [
            { name: '吉利',  demand: 600, desc: '底盘零配件制造' },
          ]
        },
        { name: '广汽',  demand: 200, desc: '座舱及内饰总装'}
      ]
    };

    myChart.hideLoading();
    myChart.setOption(
      (option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: function(params) {
            return params.name + '<br/>' 
                               + '需求量预测值: ' + params.data.demand + '<br/>'
                               + '任务描述: ' + params.data.desc;
          }
        },
        legend: {
          top: '2%',
          left: '3%',
          orient: 'vertical',
          data: [
            {
              name: '汽车生产(厂家A2，型号AX001)',
              icon: 'rectangle'
            }
          ],
          borderColor: '#c23531'
        },
        series: [
          {
            type: 'tree',
            name: '汽车生产(厂家A2，型号AX001)',
            data: [carProductionData],
            top: '5%',
            left: '20%',
            bottom: '2%',
            right: '30%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      })
    );

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

    function goBack() {
      window.location.href = 'roots.html';
    }
  </script>
</body>
</html>
